import React, { useState, useEffect, useCallback, ReactElement } from "react";
import { Radio, InputNumber, Select } from "antd";
import { radioStyle, weekOptions } from "../common";
import WeekSelect from "./WeekSelect";
import "../common.less";
const RadioGroup = Radio.Group;
const daysOfWeek = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];

interface Props {
    value: string
    onChange: (e: string) => void
}

export default function WeekPane(props: Props): ReactElement {
    const { value, onChange } = props;
    const [currentRadio, setCurrentRadio] = useState(1);
    const [from, setFrom] = useState("SUN");
    const [to, setTo] = useState("MON");
    const [weekOfMonth, setWeekOfMonth] = useState(1);
    const [dayOfWeek, setDayOfWeek] = useState("MON");
    const [lastWeekOfMonth, setLastWeekOfMonth] = useState("MON");
    const [selected, setSelected] = useState(["MON"]);
    let isFirstRender = false
    useEffect(() => { isFirstRender = true }, [])

    useEffect(() => {
        if (value === "*") {
            setCurrentRadio(1);
        } else if (value === "?") {
            setCurrentRadio(2);
        } else if (value.indexOf("-") > -1) {
            setCurrentRadio(3);
            const [defaultFrom, defaultTo] = value.split("-");
            setFrom(defaultFrom);
            setTo(defaultTo);
        } else if (value.indexOf("#") > -1) {
            setCurrentRadio(4);
            const [defaultDayOfWeek, defaultWeekOfMonth] = value.split("#");
            setWeekOfMonth(parseInt(defaultWeekOfMonth, 10));
            setDayOfWeek(defaultDayOfWeek);
        } else if (value.indexOf("L") > -1) {
            setCurrentRadio(5);
            const [defaultLastWeekOfMonth] = value.split("L");
            setLastWeekOfMonth(defaultLastWeekOfMonth);
        } else {
            setCurrentRadio(6);
            setSelected(value ? value.split(",") : ["MON"]);
        }
    }, [value]);

    useEffect(() => {
        if (!isFirstRender) {
            switch (currentRadio) {
                case 1:
                    onChange("*");
                    break;
                case 2:
                    onChange("?");
                    break;
                case 3:
                    onChange(`${from}-${to}`);
                    break;
                case 4:
                    onChange(`${dayOfWeek}#${weekOfMonth}`);
                    break;
                case 5:
                    onChange(`${lastWeekOfMonth}L`);
                    break;
                case 6:
                    onChange(selected.join(","));
                    break;
                default:
                    break;
            }
        }
    }, [currentRadio, from, to, weekOfMonth, dayOfWeek, lastWeekOfMonth, selected]);


    const onChangeRadio = useCallback((e: any) => {
        setCurrentRadio(e.target.value);
    }, []);

    const onChangeFrom = useCallback((v: any) => {
        setFrom(v || "MON");
    }, []);

    const onChangeTo = useCallback((v: any) => {
        setTo(v || "MON");
    }, []);

    const onChangeWeekOfMonth = useCallback((v: any) => {
        setWeekOfMonth(v || 1);
    }, []);

    const onChangeDayOfWeek = useCallback((v: any) => {
        setDayOfWeek(v || "MON");
    }, []);

    const onChangeLastWeekOfMonth = useCallback((v: any) => {
        setLastWeekOfMonth(v || "MON");
    }, []);

    const onChangeSelected = useCallback((v: []) => {
        let temp = v.sort((a, b) => {
            const indexA = daysOfWeek.indexOf(a);
            const indexB = daysOfWeek.indexOf(b);
            return indexA - indexB;
        });
        setSelected(temp.length !== 0 ? temp : ["MON"]);
    }, []);

    const aTobA = <WeekSelect disabled={currentRadio !== 3} value={from} size="small" onChange={onChangeFrom} style={{ width: 100 }} />;
    const aTobB = <WeekSelect disabled={currentRadio !== 3} value={to} size="small" onChange={onChangeTo} style={{ width: 100 }} />;

    const aStartTobA = <InputNumber disabled={currentRadio !== 4} min={0} max={5} value={weekOfMonth} size="small" onChange={onChangeWeekOfMonth} style={{ width: 100 }} />;
    const aStartTobB = <WeekSelect disabled={currentRadio !== 4} value={dayOfWeek} size="small" onChange={onChangeDayOfWeek} style={{ width: 100 }} />;

    const aStartTob2A = <WeekSelect disabled={currentRadio !== 5} value={lastWeekOfMonth} size="small" onChange={onChangeLastWeekOfMonth} style={{ width: 100 }} />;

    return (
        <RadioGroup name="radiogroup" value={currentRadio} onChange={onChangeRadio} style={{ width: "100%" }}>
            <Radio style={radioStyle} value={1}>
                每一周
            </Radio>

            <Radio style={radioStyle} value={2}>
                不指定
            </Radio>

            <div style={{ display: "flex", alignItems: "center", fontSize: 14 }}>
                <Radio style={radioStyle} value={3} >
                </Radio>
                从&nbsp;{aTobA}&nbsp;-&nbsp;{aTobB}&nbsp;，每星期执行一次
            </div>

            <div style={{ display: "flex", alignItems: "center", fontSize: 14 }}>
                <Radio style={radioStyle} value={4} >
                </Radio>
                本月第&nbsp;{aStartTobA} &nbsp;周的&nbsp;{aStartTobB}&nbsp;执行一次
            </div>

            <div style={{ display: "flex", alignItems: "center", fontSize: 14 }}>
                <Radio style={radioStyle} value={5} />
                本月的最后一个&nbsp;{aStartTob2A}&nbsp;执行一次
            </div>

            <div className="box_flex">
                <Radio style={radioStyle} value={6}>
                    指定
                </Radio>
                <Select
                    allowClear
                    showSearch={false}
                    size="small"
                    disabled={currentRadio != 6}
                    mode={"multiple"}
                    maxTagCount={"responsive"}
                    options={weekOptions}
                    placeholder={"请选择具体时间"}
                    style={{ width: "200px" }}
                    onChange={(e) => onChangeSelected(e)}
                >
                </Select>
            </div>
        </RadioGroup>
    );
}